// <KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

// 主要特点
    // 缓存组件
        /**
         * 当一个组件被 <keep-alive> 包裹时，它会在第一次被激活时缓存起来。
         * 当该组件被移出视图时，Vue 会保留它的状态，并在再次被激活时恢复之前的状态，而不是重新创建和渲染组件。
         */
    // 激活和停用的生命周期钩子
        /**
         * 被 <keep-alive> 包裹的组件会触发额外的两个生命周期钩子：
         * activated: 在首次挂载、,当组件被激活（即重新出现在视图中）时调用 。
         * deactivated: 当组件被停用（即从视图中移出）时调用。
         * 
         * 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。 
         */
    // 属性
        /**
         * include: 一个字符串或正则表达式或数组，只有匹配的组件会被缓存（匹配组件的name，必须显示的指定name）。
         * exclude: 一个字符串或正则表达式或数组，匹配的组件不会被缓存（匹配组件的name，必须显示的指定name）。
         * 
            <!-- 以英文逗号分隔的字符串 -->
            <KeepAlive include="a,b">
             <component :is="view" />
            </KeepAlive>

            <!-- 正则表达式 (需使用 `v-bind`) -->
            <KeepAlive :include="/a|b/">
                <component :is="view" />
            </KeepAlive>

            <!-- 数组 (需使用 `v-bind`) -->
            <KeepAlive :include="['a', 'b']">
                <component :is="view" />
            </KeepAlive>
         *
         * max: 指定最多可以缓存多少组件实例。一旦达到这个数字，最久没有被访问的缓存组件将会被销毁。
         *  <KeepAlive :max="10">
                <component :is="activeComponent" />
            </KeepAlive>
         */